<template>
  <div class="classroom">
    <div class="header">
      <div class="header-input">
        <van-search show-action placeholder="请输入感兴趣的课程">
          <template #action>
            <div style="#">已购买</div>
          </template>
        </van-search>
      </div>

      <div class="header-1">
        <van-swipe :loop="false" :width="300" :height="180" :show-indicators="false">
          <van-swipe-item><img src="../assets/image/e69244449e60576162950771a2cf5ed5.png" alt=""></van-swipe-item>
          <van-swipe-item><img src="../assets/image/3d8032169364a903010fa006edf1c01e.png" alt=""></van-swipe-item>
          <van-swipe-item><img src="../assets/image/3ea36b31d204377770791bf4bd526efe.png" alt=""></van-swipe-item>
          <van-swipe-item><img src="../assets/image/4f35300b53f5a11a1351769bdca974da.png" alt=""></van-swipe-item>
        </van-swipe>
      
      </div>
      <div style="height:185px"></div>
      <div class="header-2">
        <van-grid :gutter="5" :border="false" column-num="5">
          <van-grid-item v-for="(item, index) in gridtextlist" :key="index" :text="item.text" :icon="item.photo" />
        </van-grid>
      </div>
    </div>
    <div class="content">
      <div>
        <div class="content-1"><h2>热卖好课</h2><span>更多<img src="../assets/icon_3hx6jczz0uh/更多.png" alt=""></span></div>
        <div class="content-2">
          <van-swipe :loop="false" :width="160" :height="300" :show-indicators="false">
            <van-swipe-item><img src="../assets/image/e69244449e60576162950771a2cf5ed5.png" alt=""></van-swipe-item><h3 class="dinwei">一元秒杀：私房菜经典甜点毛巾卷</h3>
            <van-swipe-item><img src="../assets/image/3d8032169364a903010fa006edf1c01e.png" alt=""></van-swipe-item><h3 class="dinwei-1">一元秒杀：私房菜经典甜点毛巾卷</h3>
            <van-swipe-item><img src="../assets/image/3ea36b31d204377770791bf4bd526efe.png" alt=""></van-swipe-item><h3 class="dinwei-2">一元秒杀：私房菜经典甜点毛巾卷</h3>
            <van-swipe-item><img src="../assets/image/4f35300b53f5a11a1351769bdca974da.png" alt=""></van-swipe-item><h3 class="dinwei-3">一元秒杀：私房菜经典甜点毛巾卷</h3>
          </van-swipe>
      </div>
      <div>
        <div class="content-1"><h2>精品新课</h2><span>更多<img src="../assets/icon_3hx6jczz0uh/更多.png" alt=""></span></div>

        <div  class="content-2">
           <van-swipe :loop="false" :width="160" :height="300" :show-indicators="false">
              <van-swipe-item><img src="../assets/image/e69244449e60576162950771a2cf5ed5.png" alt=""></van-swipe-item><h3 class="dinwei">一元秒杀：私房菜经典甜点毛巾卷</h3>
              <van-swipe-item><img src="../assets/image/3d8032169364a903010fa006edf1c01e.png" alt=""></van-swipe-item><h3 class="dinwei-1">一元秒杀：私房菜经典甜点毛巾卷</h3>
              <van-swipe-item><img src="../assets/image/3ea36b31d204377770791bf4bd526efe.png" alt=""></van-swipe-item><h3 class="dinwei-2">一元秒杀：私房菜经典甜点毛巾卷</h3>
              <van-swipe-item><img src="../assets/image/4f35300b53f5a11a1351769bdca974da.png" alt=""></van-swipe-item><h3 class="dinwei-3">一元秒杀：私房菜经典甜点毛巾卷</h3>
          </van-swipe>
        </div>
      </div>
      <div>
        <div class="content-1"><h2>最新上架</h2><span>更多<img src="../assets/icon_3hx6jczz0uh/更多.png" alt=""></span></div>

        <div  class="content-2">
           <van-swipe :loop="false" :width="160" :height="300" :show-indicators="false">
              <van-swipe-item><img src="../assets/image/e69244449e60576162950771a2cf5ed5.png" alt=""></van-swipe-item><h3 class="dinwei">一元秒杀：私房菜经典甜点毛巾卷</h3>
              <van-swipe-item><img src="../assets/image/3d8032169364a903010fa006edf1c01e.png" alt=""></van-swipe-item><h3 class="dinwei-1">一元秒杀：私房菜经典甜点毛巾卷</h3>
              <van-swipe-item><img src="../assets/image/3ea36b31d204377770791bf4bd526efe.png" alt=""></van-swipe-item><h3 class="dinwei-2">一元秒杀：私房菜经典甜点毛巾卷</h3>
              <van-swipe-item><img src="../assets/image/4f35300b53f5a11a1351769bdca974da.png" alt=""></van-swipe-item><h3 class="dinwei-3">一元秒杀：私房菜经典甜点毛巾卷</h3>
          </van-swipe>
        </div>
      </div>     
      </div>
    </div>
    <div class="weibu"></div>
  </div>
</template>
<script>
export default { 
  data(){
    return {
      gridtextlist: [
        {
          text: "面包",
          icon: "c",
          photo: require("../assets/icon_3hx6jczz0uh/mianbao.png"),

        },
        {
          text: "甜点",
          icon: "p",
          photo: require("../assets/icon_3hx6jczz0uh/tiandian.png"),

        },
        {
          text: "中式面点",
          icon: "j",
          photo: require("../assets/icon_3hx6jczz0uh/mian.png"),

        },
        {
          text: "特色小吃",
          icon: "g",
          photo: require("../assets/icon_3hx6jczz0uh/xiaochi.png"),
          
        },
        {
          text: "家常菜",
          icon: "h",
          photo: require("../assets/icon_3hx6jczz0uh/mianfei_1.png"),

        },
        {
          text: "蛋糕",
          icon: "template",
          photo: require("../assets/icon_3hx6jczz0uh/icon-.png"),

        },
        {
          text: "饮品",
          icon: "scoped",
          photo: require("../assets/icon_3hx6jczz0uh/yinpin.png"),
        },
        {
          text: "宝宝食谱",
          icon: "sh",
          photo: require("../assets/icon_3hx6jczz0uh/baobaozhou.png"),
        },
        {
          text: "一元秒杀",
          icon: "sh",
          photo: require("../assets/icon_3hx6jczz0uh/miaosha.png"),
        },
        {
          text: "VIP免费",
          icon: "sh",
          photo: require("../assets/icon_3hx6jczz0uh/mianfei.png"),
          
        },
      ],
    }
  }
}
</script>
<style scoped>
.weibu{
  height: 50px;
}
/* .content .content-2{
   margin-bottom: 50px;
} */
  .classroom .header-input{
    margin-bottom: 20px;
    
  }
   .classroom .header .header-1{
        width: 95%;float: right;
   }
  .classroom .header img{
    border-radius: 10px;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .classroom .content-2 img{
    border-radius: 10px;
    width: 100%; height: 80%;
    object-fit: cover;
  }
  .classroom .header-1 div,.classroom .content-2 div{
    margin-right: 10px;
    border-top-left-radius:10px ;
    border-bottom-left-radius:10px ;

  }
 .classroom .header-1 div:last-child,.classroom .content-2 div:last-child{
   margin-right: 0;
 }
 .content .content-1,.classroom .content-2{
   padding-left: 10px;vertical-align: middle;
 }
  .content .content-1 span{
   display: block;
   float: right;padding-right: 10px;
  }
  .content .content-1>h2{
    margin-bottom: 20px;
    display: inline-block;
  }
  .content .content-1 img{
      width: 16px;vertical-align:bottom;
  }
.dinwei{
  position: absolute;
  top: 250px;width: 160px;
  font-family:"楷体"
}
.dinwei-1{
  position: absolute;
  top: 250px;width: 160px;left: 170px;
  font-family:"楷体"
}
.dinwei-2{
  position: absolute;
  top: 250px;width: 160px;left: 340px;
  font-family:"楷体"
}
.dinwei-3{
  position: absolute;
  top: 250px;width: 160px;left: 510px;
  font-family:"楷体"
}
</style>